import { FC, PropsWithChildren } from "react";
import clsx from "clsx";
import './page.css'

interface Props {}

const App: FC<PropsWithChildren<Props>> = (props) => {
    // let [amount, setAmount] = React.useState(0)
    let amount = 50
    let amountList = [10,20,50,100,200,500,1000,5000,10000,500,1000,5000,10000]

    const setAmountFun = (amount = 0) => {
        // setAmount(amount)
    }

    return (
        <div className="main">
            <div className="userContent">
                <div className="userInfo">
                    <div>
                        <div className="bgImg"></div>
                        <div>
                            <span>Conta</span>
                            <span className="phone">5516982013895</span>
                        </div>
                    </div>
                    <div className="goto">
                        <span>Login</span>
                        <span className="iconfont icon-to"></span>
                    </div>
                </div>
                <div className="coin">
                    <div>
                        <span className="iconfont icon-wallet"></span>
                        <div>
                            <span> Saldo </span>
                            <div className="num">
                                <span className="uppercase">brl </span>
                                <span>0.00</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <span className="iconfont icon-gift2"></span>
                        <div>
                            <span> Bônus </span>
                            <div className="num">
                                <span className="uppercase">brl </span>
                                <span>0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="link">
                <span>Depósito</span>
                <span>Sacar</span>
            </div>

            <ul>
                {
                    amountList.map((item, index) => (
                        <li className={index==0?'free':''} key={index}>
                            <div className="content"> Afiliado - Ganhe R$ 10.000 por dia | 9F.COM 
                                <span data-v-5c42ece6="" className="iconfont icon-hot"></span>
                                <div data-v-5c42ece6=""></div>
                            </div>
                            <div><span className="iconfont icon-to"></span></div>
                        </li>
                    ))
                }
            </ul>

            <span className="logOut">Login</span>
        </div>
    );
};

export default App;